<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<%@page import="com.metacube.questionbank.model.User"%>
<%
User user=(User)request.getAttribute("user");
System.out.print(user + "profile.jsp");
%>

<script type="text/javascript">

	$(document).ready(function() {
		$.ajax({
			url : 'questionPosted.json',
			datatype : 'json',
			success : function(data){
				$('#dvQuestions').empty();
				$('#dvAnswers').empty();
				$('#dvAnswersLiked').empty();
				$.each(data, function(index) {
					$('#dvQuestions').append('<div class="question-summary clearfix" style="margin-top: 20px;">' +
												'<h3 id="question_heading1"><a href="QuestionAnswer.htm?id='+data[index].quesId+
												' "title="question" id="question1">'+data[index].questionTitle+'</a></h3>'+
											'</div>');
				});
			}
		});
	});

	function AnswersGivenByUser() {
		$.ajax({
			url : 'answersGiven.json',
			datatype : 'json',
			success : function(data){
				$('#dvQuestions').empty();
				$('#dvAnswers').empty();
				$('#dvAnswersLiked').empty();
				$.each(data, function(index) {
					$('#dvAnswers').append('<div class="question-summary clearfix" style="margin-top: 20px;">' +
							'<h3 id="question_heading1"><a href="QuestionAnswer.htm?id='+data[index].questionId+
							' "title="question" id="question1">'+data[index].answerDesc+'</a></h3>'+
						'</div>');
					});
			}
		});
	}
	function AnswersLikedByUser() {
		$.ajax({
			url : 'answersLiked.json',
			datatype : 'json',
			success : function(data){
			$('#dvQuestions').empty();
			$('#dvAnswers').empty();
			$('#dvAnswersLiked').empty();
				$.each(data, function(index) {
					$('#dvAnswersLiked').append('<div class="question-summary clearfix" style="margin-top: 20px;">' +
							'<h3 id="question_heading1"><a href="QuestionAnswer.htm?id='+data[index].questionId+
							' "title="question" id="question1">'+data[index].answerDesc+'</a></h3>'+
						'</div>');
				});
			}
		});
		
	}
	
	function QuestionPostedByUser() {
		$.ajax({
			url : 'questionPosted.json',
			datatype : 'json',
			success : function(data){
				$('#dvQuestions').empty();
				$('#dvAnswers').empty();
				$('#dvAnswersLiked').empty();
				$.each(data, function(index) {					
					$('#dvQuestions').append('<div class="question-summary clearfix" style="margin-top: 20px;">' +
												'<h3 id="question_heading1"><a href="QuestionAnswer.htm?id='+data[index].quesId+
												' "title="question" id="question1">'+data[index].questionTitle+'</a></h3>'+
											'</div>');
				});
			}
		});
		
	}
	
</script>
<div class="container profile">
<% 
if(user!=null)
	out.print("<h4>Welcome: <span>" +user.getName() + "</span></h4>");
%>
	<hr>
		<div class="userDetails clearfix">
		${error}
		<div class="col-md-3 profile_pic">
 		<img src="displayImage.htm" alt="Profile Picture">
	 	<form action="edit.htm" method="post" enctype="multipart/form-data" modelAttribute="user">
 				<input type="hidden" name="user_id" value="<%=user.getUser_id()%>"  >	
 			Change your Picture
 			<input type="file" name="image_path"> 
		</div>
		<div class="col-md-9 profile_info">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">User personal information...</h3>
				</div>
				<div class="panel-body">
						<div class="form-group">
							<label for="name">Name</label>
							<input type="text" class="form-control" placeholder="name"  value="<%=user.getName()%>">
						</div>
						<div class="form-group">
							<label for="name">E-Mail</label>
							<input type="text" class="form-control" readonly value=<%=user.getEmail()%>> 
						</div>
						<div class="form-group">
							<label for="dob">Date of birth</label>
							<div class="input-group date" id="date_picker">
								<input type="date" name="dob"  min="1989-10-01" max="1994-10-20" class="form-control" value=<%=user.getDob()%> >								
							</div>									
						</div>
						<div class="form-group">
							<label for="gender">Gender</label>
							<select name="gender" id="gender" class="form-control" > 
								<c:forEach  var="gender" items="${genders}" varStatus="rowCounter" >
						                <c:choose>
						                    <c:when test="${gender==user.gender}">
						                      <option value="${gender}" selected="selected"><c:out value="${gender}" /></option>
						                     </c:when>
						                  <c:otherwise>
						                    <option value="${gender}" ><c:out value="${gender}" /></option>
						                  </c:otherwise>
						                </c:choose>                     
						        </c:forEach>
        					</select>						
						</div>
						<div class="form-group">
							<label for="about_me">About me</label>
							<textarea  name="about_me"  class="form-control ckeditor" rows="15" id="description"  name="description" style="visibility: hidden; display: none;" value=<%=user.getAbout_me()%>  ></textarea> 
						</div>
						<div class="form-group">
							<div class="btn-group">
								<button type="submit" class="btn btn-info">Submit</button>
								<button type="button" class="btn btn-info" onclick="goBack()" >Cancel</button>		
								<script>
								function goBack() {
   								 window.history.back();
								}
								</script>					
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container other_info" style="margin-bottom: 20px;">
	<div class="other_info-nav">				
		<ul class="nav nav-tabs custom-nav-tabs" role="tablist">
			<li class="active"><a onclick="QuestionPostedByUser()">Questions</a></li>
			<li><a onclick="AnswersGivenByUser();">Answers</a></li>
			<li><a onclick="AnswersLikedByUser()">Liked</a></li>
		</ul>
		<script>
			$('.other_info li').click(function(e) {
				$('.other_info li.active').removeClass('active');
				if (!$(this).hasClass('active')) {
					$(this).addClass('active');			
				}
			});
		</script>
	</div>
	<div class="other_info-container">
		<div id="dvQuestions">			
		</div>
		<div id="dvAnswers">			
		</div>
		<div id="dvAnswersLiked">			
		</div>
	</div>
</div>